<template>
    <div class="helpBg">
       <div class="help">
           <div class="contentBox" style="float:left">
               <div style="color:#303133;font-size:30px;text-align:center;margin-top:20px;height:60px">帮助中心</div>
               <div class="commonBox">
                   <div class="title-bg">
                       <h1 style="margin-left:20px">首页：提供数据统计服务，监控采集系统的采集状态并对定制指标进行统计</h1>
                    </div>
                   <img src="@/assets/img/help_home.png" style="width:95%;margin-left:30px;margin-top:19px;float:left;border-radius:1px;">
               </div>
               <div class="commonBox">
                   <div class="title-bg">
                       <h1 style="margin-left:20px">数据管理：提供数据查询服务，对商品价格数据和经济性数据进行搜索</h1>
                       </div>
                   <img src="@/assets/img/help_data.png" style="width:95%;margin-left:30px;margin-top:19px;float:left;border-radius:1px;">
               </div>
               <div class="commonBox" style="height: 320px">
                   <div class="title-bg">
                       <h1 style="margin-left:20px">节点管理：提供爬虫管理服务，对爬虫的配置信息进行有效管理</h1>
                   </div>
                   <img src="@/assets/img/help_node.png" style="width:95%;margin-left:30px;margin-top:19px;float:left;border-radius:1px;">
               </div>
               <div class="commonBox" style="height: 360px">
                   <div class="title-bg">
                       <h1 style="margin-left:20px">任务管理：提供爬虫执行任务管理服务，对爬虫的运行状态进行有效监控</h1>
                   </div>
                   <img src="@/assets/img/help_task.png" style="width:95%;margin-left:30px;margin-top:19px;float:left;border-radius:1px;">
               </div>
               <div class="commonBox">
                   <div class="title-bg">
                       <h1 style="margin-left:20px">系统管理：提供系统管理服务，对用户、角色、权限等因素进行管理</h1>
                    </div>
                   <img src="@/assets/img/help_system.png" style="width:95%;margin-left:30px;margin-top:19px;margin-bottom:25px;float:left;border-radius:1px;">
               </div>
           </div>
       </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    methods: {
    },
    created:function () {
        this.$emit('header', true);
        
    },
}
</script>

<style lang="less" scoped>
.helpBg {
    height: 2430px;
    background-color: #F1F9FD;

    .help {
        width: 70%;
        margin: 0 auto;
        // background-color: rgb(192, 32, 32);

        .contentBox {
            width: 100%;
            height: 95%;
            box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
            margin-top: 1.5%;
            background-color: rgba(243, 243, 243, 0.5); 

            .commonBox {
                height:500px;

                .title-bg {
                    // margin-left: 20px;
                    // margin-right: 20px;
                    // background-color:#6395F9;
                    background:linear-gradient(to right,#516CFF,#d4d2f8);
                    border-radius:10px;
                    height:40px;
                    line-height:40px;
                    color:#fff
                }
            }
            
        }
    }
}

</style>